import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/Avatar';
import { Button } from '@/components/ui/Button';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuLabel,
  DropdownMenuTrigger,
} from '@/components/ui/DropdownMenu';
import { getUserServerSession } from '@/server/auth';
import { redirect } from 'next/navigation';

// parellel routes
export default async function DashboardLayout({
  children,
  nav,
}: Readonly<{
  children: React.ReactNode;
  nav: React.ReactNode;
}>) {
  const session = await getUserServerSession();

  if (!session?.user) {
    return redirect('/api/auth/signin');
  }
  return (
    <div className="h-screen">
      <nav className="h-[80px] border-b relative">
        <div className="flex justify-end items-center h-full px-[64px]">
          <DropdownMenu>
            <DropdownMenuTrigger>
              <Avatar>
                <AvatarImage src={session.user.image!} />
                <AvatarFallback>
                  {session.user.name?.substring(0, 2)}
                </AvatarFallback>
              </Avatar>
            </DropdownMenuTrigger>
            <DropdownMenuContent>
              <DropdownMenuLabel>{session.user.name}</DropdownMenuLabel>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
        <div className="absolute top-0 h-full left-1/2 -translate-x-1/2 flex justify-center items-center">
          {nav}
        </div>
      </nav>
      <main className="h-[calc(100%-80px)]">{children}</main>
    </div>
  );
}
